<template>
  <div class="screen">
    <mt-header class="title" style="background-color: white;"></mt-header>
    <div id="passwordLoginTips">
      <span class="title" id="passwordTips">密码登录</span>
        <span id="student_user_span" :class="{href_span:type==0}" @click="selectType(0)">学生用户</span>
        <span id="enterprice_user_span" :class="{href_span:type==1}" @click="selectType(1)">企业用户</span>
    </div>
    <form>
      <div class="input-group input-group-lg" id="phoneNumber_div">
        <span class="input-group-addon glyphicon glyphicon-phone" id="phoneNumber"></span>
        <input type="number" class="form-control" placeholder="手机号码" aria-describedby="phoneNumber" v-model="phoneNumber">
      </div>
      <div class="input-group input-group-lg" id="password_div">
        <span class="input-group-addon glyphicon glyphicon-lock" id="password"></span>
        <input type="password" class="form-control" placeholder="请输入密码" aria-describedby="password" v-model="password">
      </div>
      <div class="input-group input-group-lg" id="verificationCode_div">
        <span class="input-group-addon glyphicon glyphicon-alert" id="verificationCode"></span>
        <input type="text" class="form-control" placeholder="请输入验证码" aria-describedby="password" v-model="verificationCode">
      </div>
    </form>
    <div class="input-group verificationCode">
      <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
      &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" @click="refreshCode">点击刷新</a>
    </div>
    <div class="common_div">
      <button type="button" class="btn btn-info btn-block" @click="login">登录</button>
    </div>
    <div class="common_div clearFloat">
      <div id="forgetPassword">
        <span><router-link :to="{name:'ForgetPassword',params:{type:this.type}}">忘记密码？</router-link></span>
      </div>
      <div id="registerAccount">
        <span><router-link to="/register">注册账号</router-link></span>
      </div>
    </div>

  </div>

</template>
<script>
  import { Toast } from 'mint-ui';
  import axios from  'axios'
  export default {
    name:'Login',
    data(){
      return {
        type:0,
        password:'',
        phoneNumber:'',
        src: '/api/captcha.jpg',
        verificationCode:''
      }
    },
    methods:{
      //刷新验证码
      refreshCode: function(){
        this.src = "/api/captcha.jpg?t=" + $.now();
      },
      login(){
        if(this.phoneNumber.trim()==''){
          Toast('手机号码不能为空!');
          return;
        }
        if(this.password.trim()==''){
          Toast('密码不能为空!');
          return;
        }
        if(this.verificationCode.trim()==''){
          Toast('验证码不能为空!');
          return;
        }
        let params = new URLSearchParams();
        params.append("phone",this.phoneNumber);
        params.append("password",this.password);
        params.append("type",this.type);
        params.append("verificationCode",this.verificationCode);
        if(this.type=="0"){
          axios.post("/api/common/login",params).then(res=>{
            console.log(res);
            if(res.data.code!=200){
              Toast(res.data.message);
            }else{
              sessionStorage.setItem("accessToken",this.phoneNumber);
              this.$router.push({path:'/main/homePage'});
            }
          })
        }else{

        }

      },
      selectType(type){
        this.type=type;
      }
    }
  }
</script>
<style>
  #student_user_span{
    margin-right: 0.5rem;
  }
#passwordLoginTips{
  text-align: left;
}
  #passwordTips{
    margin:0rem 1rem 1rem 1rem;
  }
  #password_div{
    margin:0rem 1rem 1rem 1rem;
  }
  #verificationCode_div{
    margin:0rem 1rem 1rem 1rem;
  }
  #phoneNumber_div{
    margin:2rem 1rem 1rem 1rem;
  }
  #forgetPassword{
    display: inline;
    float: left;
  }
#registerAccount{
  display: inline;
  float: right;
}
/*去除浮动*/
.clearFloat{
  overflow:hidden;
}
  .href_span {
    color: #38d8ff;
  }
  .verificationCode{
    padding-left: 10px;
    padding-bottom: 10px;
  }
</style>
